<template>
  <div class="policy-page w">
    <el-card class="box-card" shadow="hover">
      <template #header>
        <el-page-header>
          <template #title>
            <el-text size="large" tag="b">Policies</el-text>
          </template>
          <template #content>
            <el-text size="large" type="primary" tag="b">SSL Certificate Information</el-text>
          </template>
        </el-page-header>
      </template>
      
      <el-scrollbar height="calc(100vh - 280px)">
        <el-space direction="vertical" alignment="stretch" style="width: 100%">
          <div class="info-section">
            <h3 class="section-title">1. SSL Security</h3>
            <el-text class="policy-text">
              Our website uses SSL (Secure Sockets Layer) encryption to protect your personal and payment information. This technology ensures that all data passed between your browser and our servers remains private and secure.
            </el-text>
          </div>

          <div class="info-section">
            <h3 class="section-title">2. Certificate Details</h3>
            <el-text class="policy-text">
              Our SSL certificate is issued by a trusted Certificate Authority and undergoes regular validation. You can verify our security certificate by clicking the padlock icon in your browser's address bar.
            </el-text>
          </div>

          <div class="info-section">
            <h3 class="section-title">3. Data Protection</h3>
            <el-text class="policy-text">
              All sensitive information, including payment details and personal data, is encrypted using industry-standard protocols. We regularly update our security measures to maintain the highest level of protection.
            </el-text>
          </div>

          <el-divider>Additional Information</el-divider>

          <el-alert
            title="Certificate Status"
            type="success"
            :closable="false"
            show-icon
          >
            <el-text class="mx-1">Our SSL certificate is active and valid</el-text>
          </el-alert>

          <el-alert
            title="Security Verification"
            type="info"
            :closable="false"
            show-icon
          >
            <el-text class="mx-1">Look for the padlock icon in your browser to verify our security certificate</el-text>
          </el-alert>
        </el-space>
      </el-scrollbar>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()
</script>

<style scoped>
.policy-page {
  padding: 20px 0;
  background-color: var(--el-bg-color-page);
}

.policy-text {
  line-height: 1.8;
  display: block;
  margin: 10px 0;
}

:deep(.el-collapse-item__header) {
  font-size: 16px;
  font-weight: 600;
}

:deep(.el-page-header__title) {
  margin-right: 20px;
}

.info-section {
  margin-bottom: 20px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--el-text-color-primary);
}
</style> 